<template>
  <div class="app-container">
    <div class="topform">
      <el-input style="width: 300px" clearable v-model="form.serchKeyword" placeholder="请输入搜索内容"
                autocomplete="off"/>
      <el-button type="primary" style="margin-left: 10px" :loading="btnloading" @click="getlistdata(true)"
                 icon="el-icon-search">搜索
      </el-button> 
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
              header-cell-class-name="tableheader">
      <el-table-column align="center" label="合作意向" width="140">
        <template slot-scope="scope"> 
          <el-rate
            disabled
            v-model="scope.row.cooperation_lv" 
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']" style="margin-top:10px;">
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column align="center" label="店铺名称" width="200">
        <template slot-scope="scope">
          {{ scope.row.shop_name }}
        </template>
      </el-table-column>  
      <el-table-column align="center" label="联系电话" width="100">
        <template slot-scope="scope">
          {{ scope.row.link_phone }}
        </template>
      </el-table-column>  
      <el-table-column align="center" label="寄售数量(总)" width="100">
        <template slot-scope="scope">
          {{ scope.row.song_total_count }}
        </template>
      </el-table-column> 
      <el-table-column align="center" label="回执数量(总)" width="100">
        <template slot-scope="scope">
          {{ scope.row.hui_total_count }}
        </template>
      </el-table-column> 
      <el-table-column align="center" label="状态" width="70">
        <template slot-scope="scope">
          {{ scope.row.state == 1?"合作中": scope.row.state == 2?"已中止":"未知"}}
        </template>
      </el-table-column>  
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="show_consignment(scope.row)" icon="el-icon-edit">查看</el-button>
          <el-button size="mini" type="danger" @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table> 
    <div class="pagination">
      <el-pagination
        style="text-align: center"
        layout="prev, pager, next"
        small
        :current-page="form.page"
        :page-size="form.pagesize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>


    <el-dialog title="" :visible.sync="show_shop_consignment_dialog" fullscreen :close-on-click-modal="false">
      <el-descriptions v-model="shop_info"  class="margin-top" title="合作方" :column="3" :size="size" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="add_data_dialog=true">添加</el-button>
        </template>
        <el-descriptions-item contentStyle="text-align:center;">
          <template slot="label">
            <i class="el-icon-user"></i>
            店铺名
          </template>
          {{ shop_info.shop_name }}
        </el-descriptions-item>
        <el-descriptions-item contentStyle="text-align:center;">
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ shop_info.link_phone }}
        </el-descriptions-item>
        <el-descriptions-item contentStyle="text-align:center;">
          <template slot="label">
            <i class="el-icon-star-on"></i>
            合作意向
          </template>
          <el-rate
            disabled
            v-model="shop_info.cooperation_lv" 
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']" style="margin-top:10px;">
          </el-rate>
        </el-descriptions-item>
        <el-descriptions-item contentStyle="text-align:center;">
          <template slot="label">
            <i class="el-icon-table-lamp"></i>
            状态
          </template>
          {{ shop_info.state_str }}
        </el-descriptions-item>
        <el-descriptions-item contentStyle="text-align:center;">
          <template slot="label">
            <i class="el-icon-position"></i>
            寄售总数
          </template>
          <el-tag type="success"> {{shop_info.song_total_count}}</el-tag> 
        </el-descriptions-item>
        <el-descriptions-item contentStyle="text-align:center;">
          <template slot="label">
            <i class="el-icon-finished"></i>
            回执总数
          </template> 
          <el-tag type="warning"> {{shop_info.hui_total_count}}</el-tag> 
        </el-descriptions-item>
      </el-descriptions> 


      <el-table v-loading="item_listLoading" :data="item_list" element-loading-text="Loading" border fit highlight-current-row
              header-cell-class-name="tableheader"
              style="margin-top :1%" height="320"
              > 
      <el-table-column align="center" label="标签">
        <template slot-scope="scope">
          {{ scope.row.consignment_tag }}
        </template>
      </el-table-column>  
      <el-table-column align="center" label="备注">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>  
      <el-table-column align="center" label="时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.consignment_time.substring(0,16) }}
        </template>
      </el-table-column> 
      <el-table-column align="center" label="类型" width="100">
        <template slot-scope="scope">
          {{ scope.row.consignment_type_str }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="总数" width="100">
        <template slot-scope="scope">
          {{ scope.row.total_count }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="详情">
        <template slot-scope="scope">
          {{ scope.row.type_details_str }}
        </template>
      </el-table-column> 
    </el-table> 
    <div class="pagination">
      <el-pagination
        style="text-align: center"
        layout="prev, pager, next"
        small
        :current-page="shop_query_form.page"
        :page-size="shop_query_form.pagesize"
        :total="item_total"
        @size-change="item_handleSizeChange"
        @current-change="item_handleCurrentChange"/>
    </div>  
    </el-dialog>  



    <el-dialog title="添加数据" :visible.sync="add_data_dialog" width="50%" :close-on-click-modal="false">
      <el-form :model="shop_consignment_form" ref="shop_consignment_form" :rules="rule" label-width="100px">
        <el-form-item label="标签备注" prop="consignment_tag">
          <el-input clearable v-model="shop_consignment_form.consignment_tag" autocomplete="off"/>
        </el-form-item> 

        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="consignment_type">
              <el-select v-model="shop_consignment_form.consignment_type" placeholder="请选择类型">
                        <el-option label="请选择" value=""></el-option>
                        <el-option label="寄售" :value="1"></el-option> 
                        <el-option label="回执" :value="2"></el-option>
                    </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行日期" prop="consignment_time">
              <el-date-picker
                v-model="shop_consignment_form.consignment_time"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row> 
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" clearable v-model="shop_consignment_form.remark" autocomplete="off"/>
        </el-form-item>
        <el-form-item>
          <!---<el-table :data="type_list"  style="height:200px; overflow-y: scroll;">
             <el-table-column prop="type_name" label="品类" width="140">
             </el-table-column> 
             <el-table-column prop="count" label="数量">
             <template slot-scope="scope">
             <el-input-number v-model="scope.row.count" :controls="false" :min="0"></el-input-number>
             </template> 
             </el-table-column>
             </el-table>-->
             <el-descriptions title="品类数量">
                <el-descriptions-item labelStyle="padding-top:4px; width:50px" v-for="item in type_list" :key="item.type_id" :label="item.type_name">
                    <el-input-number size="mini" style="width:70px;" v-model="item.count" :controls="false" :min="0" @change="type_num_change"></el-input-number>
                </el-descriptions-item> 
            </el-descriptions> 
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save_consignment">保存</el-button>
      </div>
    </el-dialog> 
  </div>
</template>

<script>  
import * as imageConversion from 'image-conversion'
export default {
  data() {
    return { 
      size:"mini",
      action_url: this.$api + "/tools/save_file",
      btnloading: false,  
      add_data_dialog:false,
      form: {
        serchKeyword: '',
        page: 1,
        pagesize: 20
      },
      shop_info:{
        consignment_shop_id:"",
        shop_name:"", 
        link_phone:"", 
        cooperation_lv:"",
        state_str:"",
        song_total_count:0,
        hui_total_count:0
      },
      shop_query_form:{
        consignment_shop_id :'',
        serchKeyword: '',
        page: 1,
        pagesize: 20
      },
      shop_consignment_form: {
        consignment_id: '',
        consignment_shop_id: '', 
        consignment_tag:'',
        remark:'',
        consignment_type:'',
        consignment_time:'',
        details:[]
      }, 
      rule: {
        consignment_tag: [
          {required: true, message: '此项为必填项'},
        ], 
        consignment_type:[  {required: true, message: '此项为必填项'}],
        consignment_time:[  {required: true, message: '此项为必填项'}]
      },
      list: null,
      alllist: null,
      total: 0,
      listLoading: true,
      show_shop_consignment_dialog: false, 
      addicondia: false,
      editicondia: false, 
      item_list: null, 
      item_total: 0,
      item_listLoading:true,  
      type_list:[
        {
          nw_type_id:'',
          count:0
        }
      ]
    };
  }, 
  created() { 
    this.getlistdata(); 
    this.get_type_list();
  },
  methods: {
    getlistdata(isquery) {
      this.listLoading = true;
      if (isquery === true) {
        this.form.page = 1
      }
      this.$post(this.$api + '/nw/get_nw_consignment_by_shop', {
        'serchKeyword': this.form.serchKeyword,
        'page': this.form.page,
        'pagesize': this.form.pagesize
      }, false, this)
        .then((res) => {
          this.listLoading = false;
          if (res.code === 0) {
            this.list = res.rows;
            this.total = res.total;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    }, 
    get_item_list(consignment_shop_id,isquery){
     this.item_listLoading = true;
      if (isquery === true) {
        this.form.page = 1
      } 
      this.shop_query_form.consignment_shop_id = consignment_shop_id; 
      this.$post(this.$api + '/nw/get_nw_consignment_list', this.shop_query_form, false, this)
        .then((res) => {
          this.item_listLoading = false;
          if (res.code === 0) {
            this.item_list = res.rows;
            this.item_total = res.total;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    save_consignment() {
      this.$refs["shop_consignment_form"].validate((valid) => {
          if (valid) {
            this.item_listLoading = true; 
            var types = [];
            this.type_list.forEach(x=>{
              types.push({
                count:x.count,
                nw_type_id:x.type_id
              });
            });
            this.shop_consignment_form.details = types;
            console.log(this.shop_consignment_form); 
            this.$post(this.$api + '/nw/save_consignment', this.shop_consignment_form)
              .then((res) => {
                this.item_listLoading = false;
                if (res.code === 0) {
                  this.$notify({
                    title: '成功',
                    message: res.msg,
                    type: 'success'
                  });
                  this.add_data_dialog = false;
                  this.shop_consignment_form = {
                    consignment_id: '',
                    consignment_shop_id: this.shop_consignment_form.consignment_shop_id, 
                    consignment_tag:'',
                    remark:'',
                    consignment_type:'',
                    consignment_time:'',
                    details:[]
                  };
                  this.get_item_list(this.shop_consignment_form.consignment_shop_id,true);
                } else {
                  this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                  });
                }
              });
              }else{
                console.log('error submit!!');
                return false;
              }
          });
    },
    show_consignment(item) {
          this.show_shop_consignment_dialog = true;
          for(var i in this.shop_info)
          { 
               this.shop_info[i] = item[i];  
          }  
          this.get_item_list(item.consignment_shop_id,true);
          //标记新增店铺信息时的店铺ID
          this.shop_consignment_form.consignment_shop_id = item.consignment_shop_id;
    }, 
    delbtn(item) {
      this.$confirm('确认删除？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$get(this.$api + '/nw/delete_consignment', {
          'consignment_id': item.consignment_id
        })
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
              this.getlistdata();
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      })
    },
    handleSizeChange(v) {
      this.form.pagesize = v;
      this.getlistdata();
    },
    handleCurrentChange(v) {
      this.form.page = v;
      this.getlistdata();
    },
    item_handleSizeChange(v) {
      this.shop_query_form.pagesize = v;
      this.getlistdata(this.shop_consignment_form.consignment_shop_id);
    },
    item_handleCurrentChange(v) {
      this.shop_query_form.page = v;
      this.getlistdata(this.shop_consignment_form.consignment_shop_id);
    },
    get_type_list(){ 
        //获取所有库存信息
        this.$get(this.$api+"/nw/get_types").then(res=>{
            if (res.code === 0) { 
                 this.type_list = res.data.types;  
              } else {
                this.$notify({
                  title: '获取品类信息异常',
                  message: res.msg,
                  type: 'error'
                });
              }
        }); 
    },
    type_num_change(new_value,old_value)
    {  
       if(new_value===undefined)
       { 
        this.type_list.forEach(x=>{ 
              if(x.count===undefined)
              {
                x.count=0;
              }
          });
       }
    }
  }
};
</script>

